<template>
<div  class="mui-content mui-scroll-wrapper" style="padding-top: 0px;padding-bottom:50px;" id="bcid" :class="barCodeStatus? 'abs-top':''">
  <!-- 这里是历史报价的popup展示框 -->
  <mt-popup
    v-model="popupVisible"
    position="bottom"
    popup-transition="popup-fade"
    style="width:100%;height:auto;">
      <!-- 内容 -->
      <div id="popupCont">
        <!-- 最新报价 -->
        <!-- <div class="jxs-cot" style="margin-bottom:40px;">
          <p style="text-align:center;color:#333333;font-size:15px;font-weight:bold;">经销商A的报价</p>
          <p style="text-align:left;color:#333333;font-size:15px;font-weight:bold;margin:0px 0px 8px 0px;">最新报价</p>
          <div class="jxs-list" style="width:100%;height:auto;"  v-for="(v,i) in historyOffers">
            <ul style="padding:5px 10px 5px 10px;background:#F5F5F5;border-radius:8px;" v-if="i===0">
              <li style="background:#F5F5F5;padding:2px 0px 2px 0px;">裸车价：<span>{{v.price}}</span></li>
              <li style="background:#F5F5F5;padding:2px 0px 2px 0px;">金融服务费：<span>{{v.finFee}}</span>&nbsp;&nbsp;上牌服务费：<span>{{v.aplFee}}</span></li>
              <li style="background:#F5F5F5;padding:2px 0px 2px 0px;">备注：<span>{{v.remark}}</span></li>
            </ul>
          </div>
        </div> -->
        <ul>
          <!-- 循环 -->
          <p style="text-align:center;color:#333333;font-size:15px;font-weight:bold;margin-bottom:15px;">历史报价</p>
          <li style="margin-bottom:15px;" v-for="(v,i) in historyOffers">
             <div class="jxs-cot">
              <p style="text-align:left;color:#333333;font-size:15px;font-weight:bold;margin:0px 0px 8px 0px;">报价时间：{{v.offerTimeStamp | filterFun }}</p>
              <div class="jxs-list" style="width:100%;height:auto;">
                <ul style="padding:5px 10px 5px 10px;background:#F5F5F5;border-radius:8px;">
                  <li style="background:#F5F5F5;padding:2px 0px 2px 0px;">裸车价：<span>{{v.price}}</span></li>
                  <li style="background:#F5F5F5;padding:2px 0px 2px 0px;">金融服务费：<span>{{v.finFee}}</span>&nbsp;&nbsp;上牌服务费：<span>{{v.aplFee}}</span></li>
                  <li style="background:#F5F5F5;padding:2px 0px 2px 0px;">备注：<span>{{v.remark}}</span></li>
                </ul>
              </div>
            </div> 
          </li>
        </ul>
      </div>
      <!-- 按钮 -->
      <div @click="closePopupVisible" style="width:100%;height:49px;background:#FF6A27;text-align:center;font-size:15px;position:absolute;bottom:0px;line-height:49px;color:#fff;">
        确定
      </div>
  </mt-popup>
  <header class="mui-bar mui-bar-nav bg-color">
    <span @tap="goback" class="iconfont icon-fanhui"></span> 
    <h1  class="mui-title">拼单详情</h1>
  </header>
  <!-- 拼单详情，要放入拼单订单页面 -->
  <div class="mui-scroll" style="padding-bottom:44px;" v-show="!userInfoStatus&&!barCodeStatus&&!paymentStatus">
    <!-- 横线分隔条 -->
    <cross-line></cross-line>
    <ul style="background: #fff;" @tap="goUserInfo">
      <img src="static/img/di.png" style="position:absolute;width:100%;z-index: 99;"/>
      <li class="mui-table-view-cell" style="padding-top: 20px;">  
        <div>
          <span class="icon-dingw"></span>
          <div class="address-info">
            <div class="address-text">
              <span class="address-name">{{$store.getters.user.name}}</span>
              <span style="margin-left:30px;font-size:13px;">{{$store.getters.user.mobile}}</span>
            </div>
            <span class="usertit">地址:</span> 
            <span  class="userpams">{{$store.getters.user.area+$store.getters.user.address}}</span>
          </div>
          <span  class="i-c icon-you-01" style="position:relative;left:5px"></span>
        </div>
      </li>
    </ul>
    <!-- 流程图 -->
    <div class="spinner" @tap="switchSpinnerStatus"> 
        <span class="left">
            <span class="icon-liucheng-01"></span>
            <span style="margin-left:5px;display:inline-block">{{descriptionTime}}</span>
            <span style="margin-left:10px">{{title}}</span>
        </span>
        <span class="right i-c icon-you-01" style="margin-right:10px;"></span>
    </div>
    <div class="schedule" style="width:100%;background:#fff;" v-show="spinnerStatus">
        <div style="padding:10px 0px 0px 40px">
            <el-steps :space="55" direction="vertical" :active="directionlist.length">
              <div v-for="v in directionlist">
                <el-step  :title="v.title" :description="v.descriptionTime"></el-step>
              </div>
                
            </el-steps>
        </div>
    </div>
    <!-- 车型图 -->
    <ul class="mui-table-view mui-table-view-chevron">
      <li>
        <!-- 横线分隔条 -->
        <cross-line></cross-line>
        <div class="lstTop">
          <div  class="titpic">
            <img  src="static/img/hqgic.png" alt="" style="float: left;">
            <span style="float: left; color: rgb(51, 51, 51);">江苏环球港汽车城</span>
            <span v-if="currentCar.differ <0" class='right'>正在询价,还剩<span class="day">  {{remainingTime}}  </span>天</span>
            <span v-else class='right'>倒计时结束</span>
          </div>
        </div> 
        <div class="lst">
          <div  class="lstImg"  v-if="currentCar.pic == null || currentCar.pic == ''">
            <img :src="noCarPic">
          </div> 
          <div  class="lstImg"  v-else>
            <img :src="$store.state.appData.imgUrl+currentCar.pic">
          </div> 
          <div class="lstMsg">
            <p  class="carName" >{{currentCar.carName}}</p>
            <!-- <p  class="carColor">颜色:<span>{{currentCar.color}}</span> --><span class="carColor" >询价保证金:￥{{initPrice(currentCar.orderPrice)}}</span> 
            <p class="carColor" style="margin-bottom: 0px" v-if="currentCar.guidePrice == null">暂无指导价</p>
            <p class="carColor" style="margin-bottom: 0px" v-else>厂商指导价:{{currentCar.guidePrice}}万</p>
            <!-- <p  class="carColor" style="margin-bottom: 0px">期望价格:<span>￥{{initPriceYuan(currentCar.preferential)}}</span> -->
            </p>
          </div>
        </div> 
      </li>
      <!-- 经销商选择start -->
      <div style="width:100%;"> 
        <li  style="margin:10px 12px 0px 15px;">
          <div style="font-size:14px;padding-bottom:10px;" v-if="jxsOffers.length===0">
            暂无经销商
          </div>
          <span style="font-size:14px;" v-else>
            经销商选择
          </span>
          <ul style="width:100%;height:auto;">
            <!-- 循环 -->
            <li style="width:100%;overflow:hidden;height:143.5px;" v-for="(v,i) in jxsOffers">
              <div class="mui-input-row mui-radio" style="height:35px;width:16%;right:-5px;top:50px;float:left;">
                <input name="radio1" type="radio" :value="v.id" v-model="crowdData.offerId">
              </div>
              <div  style="height:auto;width:84%;right:0px;top:0px;float:left;">
                  <div style="height:40px;overflow:hidden;line-height:40px;">
                    <span style="float:left;font-size:14px;font-weight:bold;color:#333333;">经销商{{String.fromCharCode(65+i)}}</span>
                    <span style="float:right;font-size:14px;color:#999999;" @click="handleClick(v.dealerId,v.shareBillId)">历史报价 ></span>
                  </div>
                  <div style="width:100%;height:auto;background:#F5F5F5;border:1px solid #F5F5F5;border-radius:5px;">
                      <ul style="padding:5px 10px 5px 10px;background:#F5F5F5;">
                        <li style="background:#F5F5F5;padding:2px 0px 2px 0px;">裸车价：<span>{{v.price}}</span></li>
                        <li style="background:#F5F5F5;padding:2px 0px 2px 0px;">金融服务费：<span>{{v.finFee}}</span>&nbsp;&nbsp;上牌服务费：<span>{{v.aplFee}}</span></li>
                        <li style="background:#F5F5F5;padding:2px 0px 2px 0px;">备注：<span>{{v.remark}}</span></li>
                      </ul>
                  </div> 
              </div>
            </li>
          </ul>
        </li>
      </div>
      <!-- 经销商选择end -->
      <!-- <li class="mui-table-view-cell mui-media li-height">
        <a class="mui-navigate-right"  @tap="switchGoods">
          商品选择<span class="active-right" :class="activeSaler == '必选'?'red-color':''" style="font-size:13px">{{activeSaler}}</span>
        </a>
        <div  class="list" v-show="goodsStatus">
          <div style="color:#333333;font-size:13px;padding-left:5px;">{{dealer}}</div>
            <li v-for=" dealer in dealerList">
              <button type="button" :title="dealer.dealerName" style="word-wrap: break-word;" @click="activeDealer(dealer)" class="mui-btn mui-btn-outlined carColor"
              :class="activeColor(dealer)">经销商{{dealer.dealerName}}</button>
            </li>
          <div style="color:#333333;font-size:13px;padding-left:5px;clear:both" v-show="colorStatus">颜色</div>
          <li v-for=" dealer in filerGds"  v-show="colorStatus">
            <button type="button" :title="dealer.color" style="word-wrap: break-word;" @click="handleActiveColor(dealer)"  class="mui-btn mui-btn-outlined carColor"
            :class="activeColorName(dealer)">{{dealer.color}}</button>
          </li> -->
          <!-- 服务费 -->
          <!-- <div style="color:#333333;font-size:13px;padding-left:5px;clear:both" v-show="colorStatus">服务费</div>
          <div v-show="colorStatus">
            上牌服务费：{{dealerObj.aplFee}}<span style="margin-left:20px"></span>金融服务费：{{dealerObj.finFee}}
          </div> -->
          <!-- <div class="mui-input-row" v-show="remarkStatus">
              <label style="width:90px">经销商备注：</label>
              <div style="float:left;padding:8px 0px 10px 0px ;font-size:0.7rem;border-bottom:0.5px solid #ddd;" v-if="crowdData.remark" v-html="crowdData.remark">{{crowdData.remark}}</div>
              <div style="float:left;padding:8px 0px 10px 0px ;font-size:0.7rem;border-bottom:0.5px solid #ddd;" v-else>经销商留言</div> -->
              <!-- <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;border-bottom:0.5px solid #ddd;" v-model="crowdData.remark" maxlength="20" type="text" class="mui-input-clear" placeholder="经销商留言" readonly> -->
          <!-- </div>
        </div>
      </li> -->
    </ul>
    <!-- 价格走势图 -->
    <li class="mui-table-view-cell mui-media li-height" style="border-top: 1px solid #e9e9e9;" @tap="switchTrendChart" v-if="chartDateList.length !== 0">
      <a class="mui-navigate-right">
      价格走势图
      </a>
    </li>
    <div class="mui-content-price" v-if="chartDateList.length !== 0">
      <div class="mui-content-padded" v-show="trendChartStatus">
        <div class="chart" id="lineChart" ></div>
      </div>
    </div>
    <!-- 现金券 -->
    <li class="mui-table-view-cell mui-media li-height" style="border-top: 1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;">
      <a class="mui-navigate-right">
      现金券：<span class="active-right">暂无可用</span>
      </a>
    </li>
    <!-- 颜色可修改 -->
    <li class="mui-table-view-cell mui-media li-height">
      <a class="mui-navigate-right"  @tap="switchColor">
        颜色选择:<span class="active-right" :class="activeCusOutColor == '必选'?'red-color':''">{{activeCusOutColor}}</span>
      </a>
      <div  class="list" style="width:100%" v-show="colorCusStatus">
        <li v-for="color in outColor">
          <button type="button" :title="color" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" @click="activeCusCarColor(color)" class="mui-btn mui-btn-outlined carColor"
          :class="activeCusColor(color)">{{color}}</button>
        </li>
        <li>
          <button type="button" title="''" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" @click="activeCusCarColor('')" class="mui-btn mui-btn-outlined carColor"
          :class="activeCusColor('')">不限</button>
        </li>
      </div>
    </li>
    <!-- 订单编号 -->
    <li style="margin:0px 0px 0px 0px;padding-left:14px;padding-right:10px;;height:30px;">
        <div class="mui-input-row">
            <label style="width:70px;">订单编号:</label>
            <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;" v-model="currentCar.orderId"   type="text" class="mui-input-clear"  readonly="readonly">
        </div>
    </li>
    <!-- 上牌点 -->
    <li style="margin:0px 0px 0px 0px;padding-left:14px;padding-right:10px;;height:30px;">
        <div class="mui-input-row">
            <label style="width:70px;">上牌地点:</label>
            <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;" v-model="currentCar.license"  type="text" class="mui-input-clear"  readonly="readonly">
        </div>
    </li>
    <!-- 保险 -->
    <li style="margin:0px 0px 0px 0px;padding-left:14px;padding-right:10px;height:30px;">
        <div class="mui-input-row">
            <label style="width:70px;">购买保险:</label>
            <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;" v-model="isSurance"   type="text" class="mui-input-clear"  readonly="readonly">
        </div>
    </li>
    <!-- 贷款 -->
    <li style="margin:0px 0px 0px 0px;padding-left:14px;padding-right:10px;;height:30px;">
        <div class="mui-input-row">
            <label style="width:70px;">申请贷款:</label>
            <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;" v-model="isloan"   type="text" class="mui-input-clear"  readonly="readonly">
        </div>
    </li>
    <li style="margin:0px 0px 0px 0px;padding-left:15px;padding-right:10px;;height:30px;" v-show="currentCar.salerName">
      <div class="mui-input-row">
          <label style="width:70px;">导购人员:</label>
          <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;" v-model="currentCar.salerName"  type="text" class="mui-input-clear"  readonly="readonly">
      </div>
    </li>
    <!-- 期望价格 -->
    <li style="padding:0px 0px 0px 14px;">
          <div class="mui-input-row" >
              <label style="width:70px;">期望价格:</label>
                <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;border-bottom: 0.5px solid rgb(200, 199, 204);" name="number" type="text"  maxlength="8"  v-model="cusCrowdReq.preferential" class="mui-input-clear" placeholder="请输入期望价格(裸车价/元)">
                <error v-show="validated_status"></error>
          </div>
    </li>
    <li style="padding:0px 0px 0px 14px;">
        <div class="mui-input-row" >
            <label style="width:70px;">用户备注:</label>
            <input style="padding:8px 0px 10px 10px ;font-size:0.7rem;float:left;" maxlength='200' v-model="cusCrowdReq.remark"  type="text" class="mui-input-clear" placeholder="用户可留言">
            <!-- <v-edit-div style="padding:12px 0px 10px 10px ;font-size:0.7rem;float:left;" class="adaptive_box"  placeholder="选填:用户可留言" v-model="cusCrowdReq.remark"></v-edit-div> -->
        </div>
    </li>
    <!-- 联系导购 -->
    <li style="width:100%;height:39px;margin:0px 0px 0px 0px;padding-left:15px;padding-right:10px;border-top: 1px solid #e9e9e9; ">
      <div class="chat_left"  @tap="goCrmChat">
        <span class="mui-icon-extra icon-33" style="padding-top:5px;color:#3a962a; padding-bottom:5px;line-height:29px;"></span>
        <span class="customer" v-if="($store.state.appChat.crmRoomData.room_id == currentCar.orderId) && $store.state.appChat.crmRoomData.cust_msg_count"></span>
        <span class="guide">联系导购</span>
      </div>
      <div class="chat_right" @tap="updateShareBill">
        <span class="mui-icon-extra icon-xiugai-01" style="padding-top:5px;color:#3a962a; padding-bottom:5px;line-height:29px;"></span>
        <span class="guide">拼单修改</span>
      </div>
    </li>
    <!-- 横线分隔条 -->
    <cross-line></cross-line>
     <!-- 拼价规则组件 -->
     <!-- 询价规则，法律条款 -->
     <rules :rulesData="rulesData" v-on:switchRulesCheckStatus="switchRulesCheckStatus"></rules>
    <!-- 横线分隔条 -->
    <cross-line ></cross-line>
  </div>
  <nav class="mui-bar mui-bar-tab footer" v-show="!userInfoStatus&&!barCodeStatus&&!paymentStatus">
    <div class="inquiry-amount">签约资源锁定金:
      <span class="red">￥{{initPrice(downPrice)}}</span>
    </div>
    <div class="go-payment" :class="confirm ? 'abled' : 'disabled'" @tap="goPayment">
      下单付款
    </div>
  </nav>
  <!-- 用户信息组件 -->
  <userInfo v-show="userInfoStatus" :userInfoStatus="userInfoStatus" @userInfoStatus="handleUserInfoStatus"></userInfo>
  <!--支付组件-->
  <payment v-show="paymentStatus" :crowdData="crowdData" :paymentStatus="paymentStatus" @paymentStatus="handlePaymentStatus"></payment>
</div>
</template>
<script>
import mui from "static/js/mui";
import CrossLine from "@/components/base/cross-line/cross-line"
import userInfo from '@/components/filter/models-offer/user-info/user-info'
import rules from "@/components/base/rules-clause/rules-clause"
import payment from '@/components/order-form/crowd-details/payment/payment'
import {findByCarSriesId} from '@/api/confirmBidding'
import storage from "@/utils/localstorage"
import utils from '@/utils/utils'
import {getGoodsFindByCarId, getCustomerOrderAction, findPriceListByCarId, updateShareBillById} from '@/api/order'
import {isBillExpired,getPriceTrendBycarId,findOffersBydealerId,findOffersById} from "@/nodeApi/order"
import {addServiceToCustomer} from '@/api/user'
import Error from "@/components/base/form-status/error"
import { validatedMoney }from '@/utils/validator'
import { Toast } from 'mint-ui'
import vEditDiv from '@/components/base/v-edit-div/v-edit-div'
import { Popup } from 'mint-ui';

export default {
  data() {
    return {
      picked:'',
      historyOffers:{},
      jxsOffers:{},
      popupVisible:false,
      biddingStatus: true,
      /* clauseStatus: false, */
      userInfoStatus: false,
      barCodeStatus: false,
      paymentStatus: false,
      trendChartStatus: true,
      salerIdStatus: '',
      confirm: false,
      colorStatus: false,
      goodsStatus:true,
      remarkStatus:false,
      spinnerStatus: false,
      validated_status: false,
      colorCusStatus: false,
      noCarPic:'static/img/noCarPic.png',
      currentCar:'',
      pics:'',
      outColor: [],
      activeOutColor: '必选',
      downPrice: 1,
      activeSaler: '必选',
      dealer:'经销商',
      zanwu: '暂无',
      price: 1,
      dealerName:'',
      colorName: '',
      remainingTime:'',
      descriptionTime:'',
      title:'',
      height: '',
      QRLock: false,
      //拼单可修改数据
      activeCusOutColor: '必选',
      cusCrowdReq:{
        id: '',
        color: '',
        preferential: '',
        remark: ''
      },
      //整合后端所需数据
      crowdData:{
        customerId: '',
        carId: '',
        offerId: '',
        remark: ''
      },
      directionlist:[],
      //传入规则变量参数
      rulesData:{
        name:'拼单',
        clause: '',
        rule: ''
      },
      //商品价格详情
      gds:{},
      //经销商列表
      dealerList:[],
      //经销商对象
      dealerObj:{
        aplFee: '',
        finFee: ''
      },
      filerGds:[],
      //图表数据
      chartDateList:[],
      chartPriceList:[]
    };
  },
  props: {},
  watch: {
    crowdData: {
　　　　handler(newValue, oldValue) {
　　　　////console.log(newValue)
        this.changeConfirm()
　　　　},
　　　　deep: true
　　},
    cusCrowdReq: {
　　　　handler(newValue, oldValue) {
　　　　 this.crowdData.remark = newValue.remark

　　　　},
　　　　deep: true
　　},
  },
  filters: {
    filterFun: function (value) {
      // console.log()
      return utils.time.formatDatetwo(value)
    }
  },
  methods: {
    closePopupVisible(){
      this.popupVisible = false
      // mui('.mui-scroll-wrapper').scroll().setStopped(false)
    },
    handleClick(dealerId,shareBillId) {
      this.popupVisible = true
      // mui('.mui-scroll-wrapper').scroll().setStopped(true)
      findOffersBydealerId({
          "shareBillId":shareBillId,
          "dealerId":dealerId
      }).then(resp=>{
        console.log(resp.data)
        this.historyOffers=resp.data.offers
      })
    },
    updateShareBill(){
      // 是否是金钱,必须是字符串
      if(validatedMoney(this.cusCrowdReq.preferential)){
        this.validated_status = false
      }else{
        this.validated_status = true
        Toast('您输入的不是合法数字')
        return
      }
      //不能小于报价的50%且不能大于50%
      let min = parseFloat(this.currentCar.guidePrice)*10000 * 0.5
      let max = parseFloat(this.currentCar.guidePrice)*10000 
      if(min > parseInt(this.cusCrowdReq.preferential) || max < parseInt(this.cusCrowdReq.preferential)) {
          this.validated_status = true
          Toast('价格输入有误')
          return
      }
      //过滤备注
      if(this.cusCrowdReq.remark.length > 100){
        Toast('用户备注不能大于100字符')
        return 
      }
      this.cusCrowdReq.remark = utils.str.matchReg(this.cusCrowdReq.remark,'phone')
      updateShareBillById(this.cusCrowdReq).then(res=>{
        mui.alert('修改拼单信息成功', '', ['确定'],function() {},'div')
      })
    },
    switchColor() {
      //this.colorStatus = !this.colorStatus
      this.colorCusStatus = !this.colorCusStatus
    },
    getColor() {
      findByCarSriesId({'carSriesId': this.currentCar.carSeriesId}).then(response => {
        this.outColor = response.data.outColor
        // //console.log(response.outColor)
      })
    },
    activeCarColor(color) {
      if(color == ''){
        this.activeOutColor = '已选择不限'
      }else{
        this.activeOutColor = '已选择'+color
      }
      this.colorStatus = false
      this.crowdData.color =  color
    },
    activeCusCarColor(color) {
      if(color == ''){
        this.activeCusOutColor = '已选择不限'
      }else{
        this.activeCusOutColor = '已选择'+color
      }
      this.colorCusStatus = false
      this.cusCrowdReq.color =  color
    },
    goback() {
      history.go(-1)
    },
    goCrmChat() {
      let that = this
      if(!this.currentCar.salerId){
        mui.alert('您未绑定客服,确认跳转客服', '', ['确定'],function() {
          let type = storage.getLocalstorage('user').serviceId
          if(type){
            that.$router.push({
                name: "chat",
                params: { roomType: type }
            })
          }else{
            if(type == null){
              type = (Math.random() + 1).toFixed(0)
            }
            let mobile = storage.getLocalstorage('user').mobile
            if(!mobile){
              mui.alert('用户未注册', "消息提示", ['确定'],function() {
                that.$router.push('/login')
              },'div'); 
            }else{
              let data = {serviceId: type, mobile: mobile}
              addServiceToCustomer(data).then(res=>{
                storage.setLocalstorage('user', res.data)
              })
              that.$router.push({
                  name: "chat",
                  params: { roomType: type }
              })
            }
          }
        },'div');
      }else{
        this.$router.push({
          name: 'crmChat',
          params: {
            roomData: this.currentCar
          }
        })
      }
    },
    switchRulesCheckStatus(status){
      this.biddingStatus = status
      if (this.biddingStatus == true &&
        this.crowdData.customerId !='' && this.crowdData.carId != '' &&
        this.activeSaler !='必选' && this.goodsId != '') {
        this.confirm = true;
      } else {
        this.confirm = false;
      }
    },
    init() {
      this.downPrice = storage.getLocalstorage('globalConfig')[6]
      this.rulesData.clause = storage.getLocalstorage('globalConfig')[2]
      this.rulesData.rule = storage.getLocalstorage('globalConfig')[1]
      let user = storage.getLocalstorage('user')
      if(user.address == null || user.mobile == null || 
        user.name == null || user.idCard == null  ){
        this.$store.dispatch('updateNavbarStatus', { isShowHead: false, isShowFoot: false})	
        this.userInfoStatus = true
      }
      if(user.address == '' || user.mobile == '' || 
        user.name == '' || user.idCard == ''  ){
        this.$store.dispatch('updateNavbarStatus', { isShowHead: false, isShowFoot: false})	
        this.userInfoStatus = true
      }
    },
    initPrice(formartPrice) {
      let price = utils.formatMoney(formartPrice,2)
      return price
    },
    initPriceYuan(formartPrice) {
        let price = formartPrice / 10000 + '万'
        return price
    },
    switchSpinnerStatus(){
        this.spinnerStatus = !this.spinnerStatus
    },
    handleGetCustomerOrderAction() {
      //获取用户行为
      getCustomerOrderAction(this.currentCar).then( res=> {
        //console.log(res.data.action)
          for( let key in res.data.action){
              let direction = {'title':'','descriptionTime':''}
              switch(key){
                  case '1':
                      direction['title'] = '进入询价'
                      direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                      break
                  case '2':
                      direction['title'] = '已支付询价金'
                      direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                      break
                  case '3':
                      direction['title'] = '进入拼单'
                      direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                      break
                  case '4':
                      direction['title'] = '已支付拼单金'
                      direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                      break
                  case '5':
                      direction['title'] = '已转入拼单'
                      direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                      break
                  case '6':
                      direction['title'] = '已转入订单'
                      direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                      break
                  case '7':
                      direction['title'] = '已付资源锁定金，等待联系'
                      direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                      break
                  case '8':
                      direction['title'] = '订单失效'
                      direction['descriptionTime'] = utils.time.formatDatetwo(res.data.action[key])
                      break
              }
              this.directionlist.push(direction)
              //console.log(this.directionlist)
          }
          this.descriptionTime = this.directionlist[this.directionlist.length-1].descriptionTime
          this.title = this.directionlist[this.directionlist.length-1].title
      })
    },
    getGoodsDetails() {
      getGoodsFindByCarId(this.crowdData).then(res=>{
        this.gds = res.data.gds
        let englishNum = 0
        if(this.gds.length == 0){
          this.dealer = '暂无经销商报价,请耐心等待...'
        }
        for (let i=0;i<this.gds.length;i++){
          if(!this.contains(this.dealerList ,this.gds[i]['dealerId'])) {
              let dealerData = {'dealerName':String.fromCharCode(65+englishNum),'dealerId': this.gds[i]['dealerId']}
              englishNum++
              this.dealerList.push(dealerData)
              //console.log(this.dealerList)
          }
        }
        for(let j=0;j<this.dealerList.length;j++){
          for (let i=0;i<this.gds.length;i++){
            if(this.dealerList[j]['dealerId'] == this.gds[i]['dealerId']){
              this.gds[i]['dealerName'] = String.fromCharCode(65+j)
            }
          }
        }
        //console.log(this.gds)
      })
    },
    //检查数组内是否有此对象值
    contains(arr, obj) {  
        var i = arr.length;  
        while (i--) {  
            ////console.log(arr[i]['dealerId'])
            if (arr[i]['dealerId'] === obj) {  
                return true;  
            }  
        }  
        return false;  
    },
    back() {
      this.$router.push({
        path: "/index"
      });
    },
    switchGoods() {
      this.goodsStatus = !this.goodsStatus
    },
    switchTrendChart() {
      this.trendChartStatus = !this.trendChartStatus
    },
    goBarCodeStatus() {
      /**  
       * 关闭软键盘
       */  
      document.activeElement.blur(); 
      if(!this.QRLock){
        this.$store.dispatch('updateNavbarStatus', { isShowHead: false, isShowFoot: false})
        this.barCodeStatus = true
        if(window.plus){
          this.plusReady();
        }
      }else{
        mui.alert('本功能只能在车城现场使用','','','','div')
      }
    },
    goUserInfo() {
      this.$store.dispatch('updateNavbarStatus', { isShowHead: false, isShowFoot: false})		
      this.userInfoStatus = true		
    },
    goPayment() {
      if(this.crowdData.offerId == ''){
        Toast('未选保价')
      }
      //这边提示未选择经销商
      if (this.confirm == true) {

        this.$store.dispatch('updateNavbarStatus', { isShowHead: false, isShowFoot: false})
        this.paymentStatus = true
      }
    },
    getParams() {
      //获取路由参数'
      let routeVal = this.$route.params
      if(JSON.stringify(routeVal)!=="{}"){
        if(typeof(routeVal.currentCar) !== 'undefined'){
          console.log(routeVal.currentCar.id)
          this.currentCar = routeVal.currentCar
          this.cusCrowdReq.id = routeVal.currentCar.id
          this.cusCrowdReq.color = routeVal.currentCar.color
          if(routeVal.currentCar.color ==''){
            this.activeCusOutColor = '已选择不限'
          }else{
            this.activeCusOutColor = '已选择'+ routeVal.currentCar.color
          }
          this.cusCrowdReq.preferential = String(routeVal.currentCar.preferential)
          this.cusCrowdReq.remark = routeVal.currentCar.remark
          
          // 拼单经销商报价
          findOffersById({shareBillId:routeVal.currentCar.id}).then(resp=>{
            // console.log(resp.data)
            this.jxsOffers=resp.data.offers
            console.log(this.jxsOffers)
          })
          //拼单步骤
          this.handleGetCustomerOrderAction()
          ////console.log(this.currentCar)
          this.crowdData.carId =  this.currentCar.carId
          this.crowdData.customerId =  this.$store.getters.user.id

          //计算询价剩余天数
          //let nowTime = new Date().getTime()
          isBillExpired({"shareBillId":this.currentCar.id}).then(res=>{
            this.remainingTime = Math.floor( res.data.lefttime / 1000 / 3600 / 24)
          })
          //this.remainingTime = //parseInt((this.currentCar.expirationTimeInt - nowTime/1000)/86400)
          //初始化图表数据
          getPriceTrendBycarId({'carId': this.crowdData.carId}).then(res=>{
            console.log( res.data)
            for(let i=0;i<res.data.priceTrend.length;i++){
              this.chartDateList.push(utils.time.formatDatedd(res.data.priceTrend[i].date))
              this.chartPriceList.push(res.data.priceTrend[i].price)
            }
            var byId = function(id) {
                return document.getElementById(id);
            };
            this.$nextTick(function() {
              if(this.chartDateList.length !== 0){
                var lineChart = echarts.init(byId('lineChart'));
                lineChart.setOption(this.getOption('line'));
              }
            })
          })
        }
      }
    },
    activeDealer(dealer) {
      ////console.log(dealer)
      //去除二级状态
      this.remarkStatus = false
      this.colorName = ''
      this.activeSaler = ''
      this.dealerName = dealer.dealerName
      this.filerGds = []
      for (let i=0;i<this.gds.length;i++){
        if (this.gds[i]['dealerId'] === dealer.dealerId) {
          this.filerGds.push(this.gds[i])
        }
        //获取经销商的金融价格
        if (this.gds[i]['dealerId'] === dealer.dealerId) {
          this.dealerObj.aplFee = this.gds[i].aplFee
          this.dealerObj.finFee = this.gds[i].finFee
        }
      }
      ////console.log(this.filerGds)
      this.colorStatus = true
    },
    // handleActiveColor(dealer) {
    //   console.log(dealer)
    //   let Base64 = require('js-base64').Base64
    //   this.colorName = dealer.color
    //   this.crowdData.remark = dealer.remark
    //   this.crowdData.goodsId = dealer.goodId
    //   this.crowdData.orderId = this.currentCar.orderId
    //   this.crowdData.salerId = Base64.encode(this.currentCar.salerId)
    //   let price = this.initPriceYuan(dealer.price)
    //   this.activeSaler = '经销商'+dealer.dealerName+ '  '+dealer.color+'   库存'+dealer.carNumber+'台'+ '  ￥'+price
    //   this.remarkStatus = true
    //   //最后选择颜色后补齐支付数据，别忘了   
    // },
    handleUserInfoStatus(data) {
      this.userInfoStatus = data;
    },
    handleBarCodeStatus(data) {
      this.barCodeStatus = data;
    },
    handlePaymentStatus(data){
      this.paymentStatus = data;
    },
    switchUserInfoStatus() {
      //关闭控件
      try{
        window.scan.close();
      }catch(err){
          //console.log('逻辑错误')
      }
      this.$store.dispatch('updateNavbarStatus', { isShowHead: true, isShowFoot: false})
      this.barCodeStatus = !this.barCodeStatus
      plus.key.addEventListener("backbutton",function(){
      });
      //this.$emit('barCodeStatus', !this.barCodeStatus);
    },
    plusReady (){
      try{  
        let that = this
        var filter;  
        //自定义的扫描控件样式  
        var styles = {frameColor: "#29E52C",scanbarColor: "#29E52C",background: ""}  
        //扫描控件构造  
        window.scan = new plus.barcode.Barcode('bcid',filter,styles);  
        scan.onmarked = this.onmarked;   
        scan.onerror = this.onerror;  
        scan.start();  
        //打开关闭闪光灯处理  
        var flag = false;  
        document.getElementById("turnTheLight").addEventListener('tap',function(){  
            if(flag == false){  
              scan.setFlash(true);  
              flag = true;  
            }else{  
              scan.setFlash(false);  
              flag = false;  
            }  
        });  
        plus.key.addEventListener("backbutton",function(){
          that.switchUserInfoStatus()
        });
      }catch(e){  
        alert("出现错误啦:\n"+e);
      }  

    },
    // 错误信息弹窗
    onerror(e) {
       alert(e);
    },
    // 解析二维码后回调此方法
    onmarked(type, result, file){
      //相册读取会有双引号，需要去除
      result = result.replace(/\"/g, "");
      switch(type){
        case plus.barcode.QR:
        type = 'QR';
        break;
        case plus.barcode.EAN13:
        type = 'EAN13';
        break;
        case plus.barcode.EAN8:
        type = 'EAN8';
        break;
        default:
        type = '其它'+type;
        break;
      }
      //采集导购码
      if((result.substring(0,2) === 'DG')){
        let Base64 = require('js-base64').Base64
        let salerId = Base64.encode(result.substring(2,result.length))
        let QRcodeData = {'QRcode': salerId} 
        checkQRcode(QRcodeData).then(res=>{
          if(res.msg == 'success'){
            this.crowdData.salerId = salerId
            this.salerIdStatus ='已扫描'+res.data.salerName
            mui.alert('导购员:'+res.data.salerName, '', ['确定'],function() {},'div');
            //mui.alert(res.data.salerName,'提示','确定','','<div>')
          }else{
            this.crowdData.salerId = ''
            this.salerIdStatus =''
          }
        })
      }else{
        mui.alert('扫描的是无效导购二维码','温馨提醒', ['确定'],function() {},'div')
      }
      this.switchUserInfoStatus()
    },
    scanPicture() {
      var that = this
      plus.gallery.pick(function(path){
        plus.barcode.scan(path,that.onmarked,function(error){
        plus.nativeUI.alert('无法识别此图片');
      });
      }, function(err){
          //console.log('Failed: '+err.message);
      });
    },
    changeConfirm(){
      //这里验证请求参数
      if (this.biddingStatus == true &&
        this.crowdData.carId !='' && this.crowdData.customerId != '' && this.crowdData.offerId !='') {
        this.confirm = true;
      } else {
        this.confirm = false;
      }
    },
    activeColor(dealer) {
      // 记得文字同步 activeCarColor
      let text =  dealer.dealerName 
      if(this.dealerName == text){
        return 'color-active'
      }
      return ''
    },
    activeCusColor(color) {
      let text = '已选择'
      if(color == ''){
        text = text + '不限'
      }else{
        text = text + color
      }
      if(this.activeCusOutColor == text){
        return 'color-active'
      }
      return ''
    },
    activeColorName(dealer) {
      // 记得文字同步 activeCarColor
      let text =  dealer.color 
      if(this.colorName == text){
        return 'color-active'
      }
      return ''
    },
    getOption(chartType) {
      var chartOption = chartType == 'pie' ? {
        calculable: false,
      } : {
        legend: {
          data: ['报价趋势']
        },
        grid: {
          x: 65,
          x2: 10,
          y: 30,
          y2: 25
        },
        toolbox: {
          show: false,
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ['line', 'bar']
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        calculable: false,
        xAxis: [{
          type: 'category',
          data: this.chartDateList
        }],
        yAxis: [{
          type: 'value',
          splitArea: {
            show: true
          }
        }],
        series: [{
          name: '报价趋势',
          type: chartType,
          data: this.chartPriceList
        }]
      };
      return chartOption;
    }
  },
  components: { CrossLine,userInfo,payment,rules, Error, vEditDiv },
  computed: {
    isSurance(){
        if(this.currentCar.isSurance == '1'){
            return '是'
        }
        else{
            return '否'
        }
    },
    isloan(){
        if(this.currentCar.isloan == '1'){
            return '是'
        }
        else{
            return '否'
        }
    }
  },
  created() {
    
    // 时间检查
    let nowHour = utils.time.formatDatehh(new Date().getTime()/1000)
    if(nowHour>16 ||  nowHour<9){
      mui.alert('为了给您最具时效性的报价，建议您在9:00~17:00间下单','温馨提醒', ['确定'],function() {},'div')
    }
    // 检查用户信息是否完整
    this.init()
    // 获取路由参数
    this.getParams()
    this.getGoodsDetails()
    // 获取颜色
    this.getColor()
  },
  mounted() {
    let that = this;
    mui.init({
        keyEventBind: {
        backbutton: true  //关闭back按键监听
        }
    })
    mui.back = function () {
        history.go(-1)
    }
    // 竖向滚动
    scroll = mui('.mui-scroll-wrapper').scroll({
        scrollY: true, // 是否竖向滚动
        scrollX: false, // 是否横向滚动
        startX: 0, // 初始化时滚动至x
        startY: 0, // 初始化时滚动至y
        indicators: true, // 是否显示滚动条
        deceleration: 0.0006, // 阻尼系数,系数越小滑动越灵敏
        bounce: false // 是否启用回弹
    });
  
		
    /* mui(".clause").on("change", "input", function() {
      let status = this.checked ? true : false;
      if (this.value == "bidding") {
        that.biddingStatus = status;
      }
      //填写全部信息后改变状态
      if (that.biddingStatus == true &&
        that.crowdData.customerId !='' && that.crowdData.carId != '' &&
        that.activeSaler !='必选' && that.goodsId != '') {
        that.confirm = true;
      } else {
        that.confirm = false;
      }
    }); */
    this.height = document.body.clientHeight;
    window.onresize = function temp() {
      //console.log(document.body.clientHeight)
      //console.log(that.height)
      if(that.height >document.body.clientHeight){
        that.QRLock = true
      }else{
        that.QRLock = false
      }
    }
  },
  destroyed(){
    window.onresize = null;
  },
  updated() {
    console.log(this.picked)
  },
};
</script>
<style lang="scss" scoped>
@import '~static/css/index.css';
#popupCont{
  margin:34.5px 11px 80px 11px;
  /* border:1px solid #333; */
}

/*车型选择*/
li {
  list-style-type:none;
  background:#fff;
}
.mui-input-row label {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  line-height: 1.1;
  float: left;
  width: 15%;
  padding: 12px 0px 10px 3px;
  font-size: 0.7rem;
}
.mui-input-row label ~ input {
  float: left;
  padding-left: 10px !important;
  border: 0;
  border-radius: 0px!important;
  margin-bottom: 0;
}

.lstTop {
  width: 100%;
  background: #fff;
  font-size: 0.6rem;
  line-height: 36px;
  .titpic {
    overflow: hidden;
    padding: 0px 12px 0px 8px;
    .right {
      float:right;
      font-size:12px;
      color:#666666;
    }
    .day{
      color:#ff6a27;
      font-size:13px;
    }
    img {
      width: 36px;
      height: 36px;
      margin-right: 5px;
      margin-top: 3px;
    }
  }
}
.lst {
  width: 100%;
  background: #f5f5f5;
  overflow: hidden;
  padding: 10px 12px 0px 12px;
  .lstImg {
    width: 38%;
    float: left;
    height: 90px;
    background-color: #f5f5f5;
    text-align: left;
    img {
      height: 100%;
      vertical-align: middle;
    }
  }
  .lstMsg {
    width: 62%;
    float: left;
    height: 100%;
    padding: 6px 0px 5px 15px;
    p {
      text-overflow: ellipsis;
      overflow: hidden;
      word-wrap: break-word;
      word-break: normal;
      margin-bottom: 10px;
    }
  }
}
.mui-table-view-cell {
  font-size: 14px;
}
.mui-table-view-cell:before {
  height: 1px !important;
}

.mui-navigate-right:after {
  transform: rotate(90deg);
  font-size: 0.9rem;
}

.icon-22 {
  color: #b2b2b2;
  margin-right: 10px;
  margin-left: 4px;
  position: relative;
  top: 3px;
  font-size: 20px;
}

.mui-checkbox input[type="checkbox"] {
  position: absolute;
  top: 4px;
  right: 20px;
  display: inline-block;
  width: 28px;
  height: 26px;
  border: 0;
  outline: 0 !important;
  background-color: transparent;
  -webkit-appearance: none;
}

.mui-checkbox input[type="checkbox"] {
  position: absolute;
  top: 4px;
  right: 20px;
  display: inline-block;
  width: 28px;
  height: 26px;
  border: 0;
  outline: 0 !important;
  background-color: transparent;
  -webkit-appearance: none;
  margin-top: 7px;
}

.mui-checkbox input[type="checkbox"]:before {
  font-family: Muiicons;
  font-size: 28px;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  color: #aaa;
  border-radius: 0;
  background: none;
  -webkit-font-smoothing: antialiased;
}
.mui-checkbox input[type="checkbox"]:checked:before {
  content: "\e442";
}

.mui-checkbox input[type="checkbox"]:checked:before {
  color: #ff6a27;
}

.mui-checkbox input[type="checkbox"]:before {
  font-family: Muiicons;
  font-size: 28px;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  color: #aaa;
  border-radius: 0;
  background: none;
  -webkit-font-smoothing: antialiased;
}

.mui-checkbox span {
  height: 26px;
  line-height: 25px;
  position: relative;
  top: 2px;
  left: 34px;
  width: 110%;
  display: inline-block;
  padding-top: 2px;
}

.mui-radio.mui-left input[type="radio"],
.mui-checkbox.mui-left input[type="checkbox"] {
  left: 14px;
}
.mui-navigate-right:after,
.mui-push-left:after,
.mui-push-right:after {
  top: 35% !important;
}
/* 底部询价 */
.mui-bar {
  box-shadow: 0 0 1px #d2d2d2;
}
.inquiry-amount {
  height: 50px;
  width: 70%;
  line-height: 50px;
  padding-left: 23px;
  font-size: 16px;
  display: inline-block;
  float: left;
}
.red {
  color: #ff6a27;
}
.go-payment {
  height: 50px;
  width: 30%;
  line-height: 50px;
  font-size: 16px;
  display: inline-block;
  float: left;
  text-align: center;
}
.abled {
  background-color: #ff6a27;
  color: #fff;
}
.disabled {
  background-color: #b2b2b2;
  color: #fff;
}
.footer{
  background-color: #fff;
  border-bottom: 0px solid #ddd;
  border-top: 1px solid #ddd;
}
/* 颜色列表 */
.list {
  width: 108%;
  margin-top: 10px;
  position: relative;
  /* left:-10px; */
}
.list li {
  float: left;
  width: 33.33%;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 10px;
}
.carColor {
  font-size: 0.6rem;
  line-height: 15px;
  width: 100%;
  color:#333333;
}
.carColor:hover{
  background: none;
  color:#333333;
}
.carPrice {
  font-size: 0.6rem;
  line-height: 15px;
  color:#ff6a27;
}
.carName {
  font-size: 0.7rem;
  color: #333;
  line-height: 15px;
  height: 28px;
}
//地址
.icon-dingw{
  display: inline-block;
  font-size:20px;
  float:left;
  padding-top:10px;
}
.address-info{
  display: inline-block;
  margin-left:10px;
  width:80%
}
.address-name{
  font-size:14px;
}
.mui-table-view-cell:last-child:after {
    height: 0;
}
.i-c {
  float:right;
  font-size: 1.1rem;
  height:100%;
  padding-top:10px;
  position: relative;
}
.userpams{
  font-size:12px;
}
.active-right{
  position: absolute;
  right:40px;
}
.red-color{
  color:#ff6a27;
}
.abs-top{
  background-color: #000000;
  margin-bottom:40px!important;
}

.mui-icon{
   padding-top: 5px!important;
 }
  #turnTheLight{
    height:44px;
    line-height: 44px;
    position: relative;
    top:-7px;
  }
  .fbt:active {
  	-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
  }
  .mui-icon{
    padding-top: 10px; 
    padding-bottom: 10px; 
  }
  header{
    background-image:none!important;
    background:white;
  }
  .mui-title{
    color: #333333;
    font-size:18px;
  }
  
  .color-active{
    border:1px solid #ff6a27;
    color:#ff6a27!important;
  }

   /* 规则 */
    .rules{
        background: #fff;
    }
    .rules p{
        font-size:12px;
        padding:20px;
        padding-bottom:10px;
        padding-top:10px;
        margin-bottom:0px;
    }
    /* 条款 */
    .clauseText{
        background: #fff;
    }
    .clauseText p{
        font-size:12px;
        padding:20px;
        padding-bottom:10px;
        padding-top:10px;
        margin-bottom:0px;
    }
    .mui-scroll-wrapper{
        padding-bottom:40px;
    }
    .mui-scroll{
      margin-top:44px;
    }
    .mui-bar-nav ~ .mui-content {
    padding-top: 0px;
    }
     .tab-item{
        width:100%;
        background:#fff;
        overflow:hidden;
        padding:12px 12px 12px 0px;
        padding-right:15px;
        margin: 0px 10px 0px 15px;
        border-bottom: 1px solid rgb(233, 233, 233);
        .tab-item-left{
            float:left;
            width:90%;
            height:27px;
            margin-left:35px;
            p{
                line-height:27px;
                padding-bottom:0px;
                font-size:0.7rem;
                margin-bottom:0px;
                color: #333333!important;
            }
        }
        .tab-item-right{
            float:right;
            width:42%;
        height:90px; 
            text-align:center;
            img{
                height:100%;
            }
        }
        .tab-item-ipt{
            width:10%;
            float:left;

        }
    }
    .icon-more{
        float:right;
        color:#c8c7cc;
        margin-top:5px;
        font-size: 1rem;
        margin-right:5%;
        transform:rotate(90deg);
        -ms-transform:rotate(90deg); 	/* IE 9 */
        -moz-transform:rotate(90deg); 	/* Firefox */
        -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
        -o-transform:rotate(90deg); 	/* Opera */
    }
  /* mui echarts需要申明高度和宽度 */
  .chart {
    height: 200px;
    margin: 0px;
    padding: 0px;
  }

  .mui-table-view-cell:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 15px;
    height: 0px!important;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: none;
  }
  .mui-content-price{
     background: #fff;
  }
  .mui-content-padded{
    background: #fff;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left:10px;
    margin-right:10px;
  }

  //下拉组件
  .spinner{
      width:100%;
      height:40px;
      background: #fff;
      border-top: 1px solid #e9e9e9;
  }
  .spinner .left{
      height:40px;
      line-height: 40px;
      margin-left: 15px;
      color: #ff6a27;
  }
  .spinner .right{
      transform:rotate(90deg);
      -ms-transform:rotate(90deg); 	/* IE 9 */
      -moz-transform:rotate(90deg); 	/* Firefox */
      -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
      -o-transform:rotate(90deg); 	/* Opera */
  }
  .icon-liucheng-01{
    font-size:22px;
    position: relative;
    top: 5px;
    display:inline-block;    
  }
  .orderPrice{
    float:right;
  }
  /* 联系导购 */
  .guide {
    font-size:16px;
    line-height:29px;
    display:inline-block;
    position:relative;
    vertical-align:top;
    padding-top:5px;
    margin-left:8px;
    padding-bottom: 5px;
  }
  .icon-fanhui {
    line-height: 43px;
    font-size: 0.9rem;
    width: 43px;
  }
   /* 客服 */
  .customer {
    position: absolute;
    display: inline-block;
    margin-top: 8px;
    margin-left: -10px;
    width:8px;
    height:8px;
    background: #ff6a27;
    border-radius:4px;
    font-size: 10px;
  }
  .adaptive_box { 
    text-align:left; 
    line-height:16px; 
    font-size: 12px; 
    border: none; 
    padding: 0px; 
    background:#fff;
    min-height: 16px; 
    max-height: 300px; 
    margin-right: 0; 
    outline: 0; 
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: visible;
    width: 65%;
  }
  .adaptive_box:empty:before{
    content: attr(placeholder);
    color:#bbb;
  }
  .adaptive_box:focus:before{
    content:none;
  }
  .red-color{
    color:#ff6a27;
  }
  .color-active{
    border:1px solid #ff6a27;
    color:#ff6a27;
  }
  .chat_left{
    display: inline-block;
    width:50%;
    float:left;
    text-align: center;
    border-right: 1px solid #e9e9e9;
  }
  .chat_right{
    display: inline-block;
    width:50%;
    float:right;
    text-align: center;
  }
</style>

